<template>
	<view class="order-complete-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<text class="status-text">订单已完成</text>
		</view>

		<!-- 订单信息主体 -->
		<view class="order-content">
			<!-- 订单信息标题 -->
			<view class="section-title">
				<text>订单信息</text>
			</view>

			<!-- 订单详情列表 -->
			<view class="order-detail-list">
				<view class="detail-item">
					<text class="detail-label">待帮助人</text>
					<view class="detail-value">
						<text>一具学生尸体</text>
						<text class="copy-btn">复制</text>
					</view>
				</view>

				<view class="detail-item">
					<text class="detail-label">订单编号</text>
					<text class="detail-value">e2025070416552697</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">下单时间</text>
					<text class="detail-value">2025-07-04 16:55:27</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">互助时间</text>
					<text class="detail-value">今天</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">互助地点</text>
					<text class="detail-value">不限校区</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">完成时间</text>
					<text class="detail-value">2025-07-07 15:05:15</text>
				</view>
			</view>

			<!-- 订单详情描述 -->
			<view class="order-description">
				<text class="description-text">去顺丰拿个快递，再寄到我现在的地址，快递费加我微信</text>
			</view>

			<!-- 仅接单人可见信息 -->
			<view class="private-info">
				<view class="private-info-header">
					<uni-icons type="bag" size="16" color="#666"></uni-icons>
					<text class="private-info-title">仅接单人可见信息</text>
				</view>
				<text class="private-info-tip">接单后可查看该信息</text>
				<text class="private-info-notice">平台居间保障，单独推送，效率更高</text>
			</view>
		</view>

		<!-- 底部佣金和导航 -->
		<view class="bottom-bar">
			<view class="commission">
				<text class="commission-symbol">￥</text>
				<text class="commission-value">5.10</text>
				<text class="commission-label">到手佣金</text>
			</view>

			<view class="nav-buttons">
				<button class="nav-button" @click="navigateTo('publish')">
					<uni-icons type="plus" size="20" color="#666"></uni-icons>
					<text>发布</text>
				</button>
				<button class="nav-button" @click="navigateTo('message')">
					<uni-icons type="chat" size="20" color="#666"></uni-icons>
					<text>消息</text>
				</button>
				<button class="nav-button" @click="navigateTo('home')">
					<uni-icons type="home" size="20" color="#666"></uni-icons>
					<text>首页</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 导航跳转
	const navigateTo = (page) => {
		switch (page) {
			case 'publish':
				uni.navigateTo({
					url: '/pages_help/pubSender/pubSender'
				})
				break
			case 'message':
				uni.reLaunch({
					url: '/pages/message/message'
				})
				break
			case 'home':
				uni.reLaunch({
					url: '/pages/index/index'
				})
				break
		}
	}

	onLoad(() => {
		// 可以在这里加载订单数据
	})
</script>

<style lang="scss">
	/* 全局样式变量 */
	$primary-color: #07C160; // 主色调绿色
	$text-color: #333; // 主要文字颜色
	$secondary-text: #666; // 次要文字颜色
	$light-text: #999; // 浅色文字
	$pink-color: #FF6B81; // 粉色文字
	$border-color: #eee; // 边框颜色
	$bg-color: #fff; // 背景色
	$section-gap: 20rpx; // 区块间距

	.order-complete-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: $bg-color;
		padding-bottom: 120rpx; // 为底部导航留出空间
	}

	/* 顶部状态栏 */
	.status-bar {
		background-color: $primary-color;
		padding: 20rpx 30rpx;

		.status-text {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	/* 订单内容区域 */
	.order-content {
		padding: 0 30rpx;
		flex: 1;
	}

	/* 区块标题 */
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $text-color;
		padding: $section-gap 0;
		border-bottom: 1rpx solid $border-color;
		margin-bottom: $section-gap;
	}

	/* 订单详情列表 */
	.order-detail-list {
		.detail-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid $border-color;

			&:last-child {
				border-bottom: none;
			}

			.detail-label {
				color: $secondary-text;
				font-size: 28rpx;
			}

			.detail-value {
				color: $text-color;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.copy-btn {
					margin-left: 20rpx;
					color: $primary-color;
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border: 1rpx solid $primary-color;
					border-radius: 20rpx;
				}
			}
		}
	}

	/* 订单描述 */
	.order-description {
		margin-top: $section-gap;
		padding: 20rpx;
		background-color: #FFF5F6;
		border-radius: 10rpx;

		.description-text {
			color: $pink-color;
			font-size: 28rpx;
			line-height: 1.6;
		}
	}

	/* 仅接单人可见信息 */
	.private-info {
		margin-top: $section-gap;
		padding: 20rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;

		.private-info-header {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.private-info-title {
				margin-left: 10rpx;
				color: $secondary-text;
				font-size: 28rpx;
			}
		}

		.private-info-tip {
			color: $light-text;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			display: block;
		}

		.private-info-notice {
			color: $primary-color;
			font-size: 24rpx;
		}
	}

	/* 底部栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $bg-color;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.commission {
			display: flex;
			align-items: flex-end;

			.commission-symbol {
				color: $pink-color;
				font-size: 28rpx;
				font-weight: bold;
			}

			.commission-value {
				color: $pink-color;
				font-size: 40rpx;
				font-weight: bold;
				margin: 0 10rpx;
			}

			.commission-label {
				color: $secondary-text;
				font-size: 24rpx;
			}
		}

		.nav-buttons {
			display: flex;
			height: 70rpx;
			
			.nav-button {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: none;
				border: none;
				margin-left: 40rpx;
				padding: 0;

				text {
					font-size: 24rpx;
					color: $secondary-text;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>